<script setup>

  const childs = ref([])
  const index = ref(0)
  function addChild(data) {
    childs.value.push(data)
  }

  function changeIndex(i) {
    index.value = i
    change()
  }

  function change() {
    childs.value.map((child, i) => {
      i == index.value ? child.show() : child.hide()
    })
  }

  provide('$parent', { addChild })

  onMounted(() => {
    change()
  })
</script>

<template>
  <div>
    <ul class="flex items-center gap-2 border-b border-b-blue-50">
      <li v-for="d, i in childs" :key="i" class="cursor-pointer rounded py-2 px-4"
        :class="[i == index ? 'bg-gradient-to-r from-indigo-500 to-blue-500 text-white' : 'hover:bg-indigo-50']" @click="changeIndex(i)">{{d.title}}
      </li>
    </ul>
    <slot />
  </div>
</template>

<style lang="scss" scoped>
  .tab {}
</style>